<template>
	<view class="login-container">
		<!-- 科技背景动画元素 -->
		<view class="bg-particles">
			<view class="particle particle-1"></view>
			<view class="particle particle-2"></view>
			<view class="particle particle-3"></view>
		</view>

		<!-- 主要内容 -->
		<view class="login-content">
			<!-- Logo区域 -->
			<view class="logo-section">
				<!-- Logo图标 -->
				<view class="logo-wrapper">
					<view class="logo-box">
						<text class="logo-emoji">🍱</text>
					</view>
					<!-- 装饰性圆环 -->
					<view class="logo-ring"></view>
				</view>

				<!-- 标题 -->
				<text class="main-title">清华美食地图</text>
				<text class="sub-title">Tsinghua Food Map</text>
			</view>

			<!-- 欢迎文本 -->
			<view class="welcome-section">
				<text class="welcome-text">欢迎来到</text>
				<text class="welcome-desc">发现校园美食，分享美味时刻</text>
			</view>

			<!-- 登录按钮 -->
			<view class="button-section">
				<!-- 微信登录按钮 -->
				<button
					class="login-button"
					:class="{'loading': isLoading}"
					hover-class="button-hover"
					:disabled="isLoading"
					@click="handleLogin"
				>
					<view class="button-content">
						<text v-if="!isLoading" class="button-text">{{loginButtonText}}</text>
						<view v-else class="loading-content">
							<view class="loading-spinner"></view>
							<text class="button-text">登录中...</text>
						</view>
					</view>
				</button>

				<!-- 授权提示 -->
				<view class="agreement-text">
					<text>登录即表示同意</text>
					<text class="link-text">用户协议</text>
					<text>和</text>
					<text class="link-text">隐私政策</text>
				</view>
			</view>

			<!-- 底部装饰 -->
			<view class="bottom-dots">
				<view class="dot dot-1"></view>
				<view class="dot dot-2"></view>
				<view class="dot dot-3"></view>
			</view>
		</view>
	</view>
</template>

<script>
import { request, utils } from '@/utils/api.js'

export default {
	data() {
		return {
			isLoading: false,
			loginButtonText: '微信快速登录'
		}
	},

	onLoad() {
		// 检查是否已登录
		this.checkLoginStatus()
	},

	methods: {
		/**
		 * 检查登录状态
		 */
		checkLoginStatus() {
			const token = uni.getStorageSync('token')
			if (token) {
				// 已登录，跳转到地图页
				uni.reLaunch({
					url: '/pages/map/map'
				})
			}
		},

		/**
		 * 处理登录（button点击触发）
		 */
		async handleLogin() {
			console.log('开始微信登录流程')

			if (this.isLoading) return

			this.isLoading = true

			try {
				// 1. 获取微信登录code
				const loginRes = await this.getWechatCode()

				// 2. 获取用户信息（可选）
				const userInfo = await this.getUserProfile()

				// 3. 调用后端登录接口
				await this.loginToServer(loginRes.code, userInfo)

			} catch (error) {
				console.error('登录失败:', error)
				utils.handleError(error, '登录失败，请重试')
			} finally {
				this.isLoading = false
			}
		},

		/**
		 * 获取微信登录code
		 */
		getWechatCode() {
			return new Promise((resolve, reject) => {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						if (res.code) {
							resolve(res)
						} else {
							reject(new Error('获取code失败'))
						}
					},
					fail: reject
				})
			})
		},

		/**
		 * 获取用户信息
		 */
		getUserProfile() {
			return new Promise((resolve, reject) => {
				uni.getUserProfile({
					desc: '用于完善用户资料',
					success: (res) => {
						resolve(res.userInfo)
					},
					fail: (error) => {
						// 用户拒绝授权，使用默认信息
						console.log('用户拒绝授权:', error)
						resolve({
							nickName: '小程序用户',
							avatarUrl: ''
						})
					}
				})
			})
		},

		/**
		 * 调用后端登录接口
		 */
		async loginToServer(code, userInfo) {
			try {
				const requestData = {
					code,
					nickname: userInfo?.nickName || '小程序用户',
					avatarUrl: userInfo?.avatarUrl || ''
				}

				const response = await request({
					url: '/auth/miniprogram/login',
					method: 'POST',
					data: requestData
				})

				if (response.success) {
					// 保存token和用户信息
					uni.setStorageSync('token', response.data.token)
					uni.setStorageSync('userInfo', response.data.user)

					// 显示成功提示
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1500
					})

					// 延迟跳转到地图页
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/map/map'
						})
					}, 1500)
				} else {
					throw new Error(response.message || '登录失败')
				}
			} catch (error) {
				throw error
			}
		}
	}
}
</script>

<style scoped>
/* 容器样式 */
.login-container {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(180deg, #0a0e27 0%, #151a3d 100%);
	position: relative;
	overflow: hidden;
}

/* 背景粒子动画 */
.bg-particles {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.2;
	pointer-events: none;
}

.particle {
	position: absolute;
	border-radius: 50%;
	filter: blur(80rpx);
	animation: pulse 3s ease-in-out infinite;
}

.particle-1 {
	top: 40rpx;
	left: 20rpx;
	width: 320rpx;
	height: 320rpx;
	background: #2563eb;
}

.particle-2 {
	bottom: 80rpx;
	right: 20rpx;
	width: 480rpx;
	height: 480rpx;
	background: #06b6d4;
	animation-delay: 1s;
}

.particle-3 {
	top: 50%;
	left: 50%;
	margin-top: -320rpx;
	margin-left: -320rpx;
	width: 640rpx;
	height: 640rpx;
	background: #8b5cf6;
	animation-delay: 2s;
}

@keyframes pulse {
	0%, 100% {
		opacity: 0.3;
		transform: scale(1);
	}
	50% {
		opacity: 0.6;
		transform: scale(1.05);
	}
}

/* 主要内容区域 */
.login-content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 0 60rpx;
}

/* Logo区域 */
.logo-section {
	margin-bottom: 120rpx;
	text-align: center;
}

.logo-wrapper {
	position: relative;
	margin: 0 auto 48rpx;
	width: 192rpx;
	height: 192rpx;
}

.logo-box {
	width: 192rpx;
	height: 192rpx;
	border-radius: 60rpx;
	background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 40rpx rgba(37, 99, 235, 0.5);
	animation: glow 2s ease-in-out infinite alternate;
}

.logo-emoji {
	font-size: 100rpx;
}

.logo-ring {
	position: absolute;
	top: -16rpx;
	left: -16rpx;
	right: -16rpx;
	bottom: -16rpx;
	border: 4rpx solid #06b6d4;
	border-radius: 60rpx;
	opacity: 0.3;
	animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes glow {
	from {
		box-shadow: 0 0 40rpx rgba(37, 99, 235, 0.3);
	}
	to {
		box-shadow: 0 0 60rpx rgba(37, 99, 235, 0.6);
	}
}

@keyframes ping {
	75%, 100% {
		transform: scale(1.2);
		opacity: 0;
	}
}

.main-title {
	display: block;
	font-size: 72rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 24rpx;
	text-shadow: 0 0 20rpx rgba(37, 99, 235, 0.5);
}

.sub-title {
	display: block;
	font-size: 32rpx;
	color: #9ca3af;
}

/* 欢迎文本 */
.welcome-section {
	margin-bottom: 96rpx;
	text-align: center;
}

.welcome-text {
	display: block;
	font-size: 40rpx;
	color: #ffffff;
	margin-bottom: 16rpx;
}

.welcome-desc {
	display: block;
	font-size: 28rpx;
	color: #9ca3af;
}

/* 按钮区域 */
.button-section {
	width: 100%;
	max-width: 560rpx;
}

.login-button {
	width: 100%;
	background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
	color: #ffffff;
	font-weight: 500;
	padding: 32rpx 48rpx;
	border-radius: 32rpx;
	border: none;
	box-shadow: 0 0 40rpx rgba(37, 99, 235, 0.5);
	transition: all 0.3s ease;
	margin-bottom: 32rpx;
}

.login-button.loading {
	opacity: 0.8;
}

.button-hover {
	opacity: 0.9;
	transform: scale(0.98);
}

.button-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.button-text {
	font-size: 36rpx;
	color: #ffffff;
}

.loading-content {
	display: flex;
	align-items: center;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #ffffff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 16rpx;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* 协议文本 */
.agreement-text {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #6b7280;
	margin-bottom: 64rpx;
}

.link-text {
	color: #06b6d4;
	margin: 0 8rpx;
}

/* 底部装饰点 */
.bottom-dots {
	position: absolute;
	bottom: 64rpx;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 16rpx;
}

.dot {
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	opacity: 0.6;
}

.dot-1 {
	background: #2563eb;
}

.dot-2 {
	background: #06b6d4;
}

.dot-3 {
	background: #8b5cf6;
}
</style>
